<template>
  <div class="sidebar"
       :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
    <logo v-if="showLogo" :collapse="collapse"/>
    <el-scrollbar class=" theme-dark" style="height:  90%;width: auto" wrap-style="overflow-x:hidden;">
      <el-menu
          class="sidebar-el-menu"
          :default-active="onRoutes"
          :collapse="collapse"
          :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
          :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
          :active-text-color="settings.theme"
          unique-opened
          router
          v-loading="listLoading"
      >
        <template v-for="item in topNav?sidebarRouters:items">
          <template v-if="item&&item.subs">
            <el-sub-menu :index="item.index" :key="item.index">
              <template #title>
                <i :class="item.icon"></i>
                <span slot="title">{{ item.title }}</span>
              </template>
              <template v-for="subItem in item.subs">
                <el-sub-menu v-if="subItem.subs" :index="subItem.index" :key="subItem.id">
                  <template  #title>
                    <i :class="subItem.icon"></i><span>{{ subItem.title }}</span>
                  </template>
                  <el-menu-item v-for="(threeItem, index) in subItem.subs" :key="threeItem.index"
                                :index="threeItem.index"><i :class="threeItem.icon"></i>
                    <span slot="title">{{ threeItem.title }}</span>
                  </el-menu-item>
                </el-sub-menu>
                <el-menu-item v-else :index="subItem.index" :key="subItem.index"><i :class="subItem.icon"></i><span
                    slot="title">{{ subItem.title }}</span></el-menu-item>
              </template>
            </el-sub-menu>
          </template>
          <template v-else-if="item">
            <el-menu-item :index="item.index" :key="item.index" @click.native="topage(item)">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.title }}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </el-scrollbar>
  </div>

</template>
<script setup lang="ts">
import bus from 'vue3-eventbus';
import {mapState} from "vuex";
import {getmenuBar} from '@/utils/urls';
import Logo from "@/components/common/Sidebar/Logo.vue";
import variables from "@/assets/styles/variables.module.scss";
import {Tool} from "@/utils/tool";
import {ref, inject, reactive, onMounted, computed, watch} from 'vue';
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";

const store: any = useStore();
const route: any = useRoute();
const router: any = useRouter();
const userResource = reactive([]);
const collapse = ref(false);
let items = reactive([]);
const isShow = ref(false);
const loading = ref(false);
const listLoading = ref(false);
const topage = (item: any) => {
  if (item.linkType == 2) {
    store.state.tagsView.iframeSrc = item.page
    store.state.tagsView.iframeTitle = item.title
  }
}
const onRoutes = computed({
  get: () => route.path,
  set: (val) => {
  }
})
const setting = computed({
  get: () => store.state.settings.showSettings,
  set: (val) => {
    store.dispatch('settings/changeSetting', {
      key: 'showSettings',
      value: val
    })
  }
})
const settings = computed({
  get: () => store.state.settings,
  set: (val) => {
  }
})
const sidebarRouters = computed({
  get: () => {
    return store.state.tagsView.sidebarRouters
  },
  set: (val) => {
  }
})
const showLogo = computed({
  get: () => store.state.settings.sidebarLogo,
  set: (val) => {
  }
})
const topNav = computed({
  get: () => store.state.settings.topNav,
  set: (val) => {
    items = []
  }
})
onMounted(() => {
  listLoading.value = true
  items = getmenuBar(Tool.getInstance().getLoginUser().resources)
  listLoading.value = false
  bus.on('collapse', msg => {
    collapse.value = msg;
    bus.emit('collapse-content', msg);
  });

})
</script>

<style>
.sidebar {
  webkit-transition: width .28s;
  transition: width .28s;
  height: 100%;
  position: fixed;
  font-size: 0;
  top: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  z-index: 1000;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 200px;
}

.sidebar > ul {
  height: 100%;
}

.logo {
  color: rgb(247, 248, 250);
  box-sizing: content-box;
  font-size: 14px;
  font-weight: bolder;
}

.sidebar .logo {
  line-height: 70px;
}

.sidebar .logo-title-hidden {
  width: 65px !important;
  line-height: 70px;
  overflow: hidden;
}

.el-scrollbar .el-scrollbar__wrap {
  /*margin-right: -27px!important;*/
}

.el-scrollbar .is-horizontal {
  display: none !important;
}

.sidebar .logo-title-hidden span {
  display: none;
}

.logo-title-hidden {
  color: rgb(191, 203, 217);
  box-sizing: content-box;
  font-size: 15px;

}

.logo img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 12px;
}

.logo-title-hidden img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 12px;
}

.el-menu-item i {
  /*margin-right: 5px;*/
  /*width: 24px;*/
  /*text-align: center;*/
  /*font-size: 18px;*/
  /*vertical-align: middle;*/
  margin-right: 5px;
  width: 24px;

}
.el-sub-menu i {
  /*margin-right: 5px;*/
  /*width: 24px;*/
  /*text-align: center;*/
  /*font-size: 18px;*/
  /*vertical-align: middle;*/
  margin-right: 5px;
  width: 24px;

}

.menu--collapse .el-scrollbar .el-submenu .el-submenu__title span {
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  display: inline-block;
}

.menu--collapse .el-scrollbar .el-submenu .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden !important;
  visibility: hidden !important;
  display: inline-block;
}

/* 加过渡给侧边导航*/
.el-aside .content-box {
  transition: width 0.015s;
  -webkit-transition: width 0.025s;
  -moz-transition: width 0.25s;
  -webkit-transition: width 0.025s;
  -o-transition: width 0.025s;
}

/*加快侧边栏文字消失的速度*/
.el-menu .header {
  transition: all 10ms;
}

#logo .el-icon-arrow-down {
  display: none;
}

.el-menu {
  border-right: none !important;
}
</style>
